<template>

  <div>
    <Row>
      <Card>
        <div class="top-tool-bar clearfix">

          <Select v-model="model1" style="width:150px" placeholder="所属公司">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>

          <Input v-model="value" placeholder="请输入车牌号" style="width: 150px"></Input>

          <Button type="primary" icon="ios-search" loading @click.prevent.stop="search()">搜索</Button>

          <Button type="primary" class="pull-right margin-left-10" @click.prevent.stop="del()">删除</Button>

          <Button type="primary" class="pull-right margin-left-10" @click.prevent.stop="add()">增加</Button>

        </div>

        <Table border :columns="columns4" :data="data1"></Table>

        <Page :total="40" show-elevator show-sizer @on-change="changePage"></Page>
      </Card>
    </Row>



    <!--车辆详情-->
    <Modal
            v-model="showCarDetailModal"
            title="车辆详情"
            width="550"
            @on-cancel="cancelCarDetailModal">
      <Form :model="detail" label-position="right" :label-width="80"  >
        <Form-item label="车牌号">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="车类型">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="所属公司">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="车颜色">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="状态">
          <RadioGroup v-model="model1">
            <Radio label="待配送"></Radio>
            <Radio label="已配送"></Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="运输量">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="绑定终端号">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>

      </Form>
      <div slot="footer">
      </div>

    </Modal>

    <!--新增槽车-->
    <Modal
            v-model="showAddCarModal"
            title="新增槽车"
            width="550"
            @on-cancel="cancelAddCarModal">
      <Form :model="detail" label-position="right" :label-width="80"  >
        <Form-item label="车牌号">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="车类型">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="所属公司">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="车颜色">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="状态">
          <RadioGroup v-model="model1">
            <Radio label="待配送"></Radio>
            <Radio label="已配送"></Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="运输量">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="绑定终端号">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>

      </Form>
    </Modal>

    <!--修改槽车-->
    <Modal
            v-model="showModCarModal"
            title="修改槽车"
            width="550"
            @on-cancel="cancelModCarModal">
      <Form :model="detail" label-position="right" :label-width="80"  >
        <Form-item label="车牌号">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="车类型">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="所属公司">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="车颜色">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="状态">
          <RadioGroup v-model="model1">
            <Radio label="待配送"></Radio>
            <Radio label="已配送"></Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="运输量">
          <Input v-model="model1"></Input>
        </Form-item>
        <Form-item label="绑定终端号">
          <Select v-model="model1">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>

      </Form>
    </Modal>


  </div>




</template>

<style scoped>

</style>

<script type="text/ecmascript-6">
    import util from '@/libs/util';

  export default {
    data () {
      return {
        detail:{},
        showCarDetailModal:false,
        showAddCarModal:false,
        showModCarModal:false,
        loading: true,
        showTip:false,
        list: {},
        cityList: [
          {
            value: 'beijing',
            label: '北京市'
          },
          {
            value: 'shanghai',
            label: '上海市'
          },
          {
            value: 'shenzhen',
            label: '深圳市'
          },
          {
            value: 'hangzhou',
            label: '杭州市'
          },
          {
            value: 'nanjing',
            label: '南京市'
          },
          {
            value: 'chongqing',
            label: '重庆市'
          }
        ],
        model1: '',
        value: '',
        option:{},
        columns4: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '车牌号',
            key: 'name1'
          },
          {
            title: '车类型',
            key: 'name2'
          },
          {
            title: '所属公司',
            key: 'name3'
          },
          {
            title: '运输量',
            key: 'name4'
          },
          {
            title: '车颜色',
            key: 'name5'
          },
          {
            title: '状态',
            key: 'name6'
          },
          {
            title: '绑定终端号',
            key: 'name7'
          },
          {
            title: '操作',
            key: 'action',
            width: 180,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      console.log(JSON.stringify(params));
                      this.lookDetail();
                    }
                  }
                }, '详情'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      console.log(JSON.stringify(params));
                      this.showModCar();
                    }
                  }
                }, '修改')
              ]);

            }
          }
        ],
        data1: [
          {
            name1: '浙F12345',
            name2: '槽车',
            name3: '嘉兴能源贸易公司',
            name4: '53m³',
            name5: '白色',
            name6: '已派单',
            name7: '111109310'
          },
          {
            name1: '浙F12345',
            name2: '槽车',
            name3: '嘉兴能源贸易公司',
            name4: '53m³',
            name5: '白色',
            name6: '已派单',
            name7: '111109310'
          },
          {
            name1: '浙F12345',
            name2: '槽车',
            name3: '嘉兴能源贸易公司',
            name4: '53m³',
            name5: '白色',
            name6: '已派单',
            name7: '111109310'
          },
          {
            name1: '浙F12345',
            name2: '槽车',
            name3: '嘉兴能源贸易公司',
            name4: '53m³',
            name5: '白色',
            name6: '已派单',
            name7: '111109310'
          },
        ]
      }
    },
    methods: {
      showModCar(){
        this.showModCarModal =true;
      },
      lookDetail(){
        this.showCarDetailModal =true;
      },
      add(){
        this.showAddCarModal =true;
      },
      cancelCarDetailModal(){
        this.showCarDetailModal =false;
      },
      cancelAddCarModal(){
        this.showAddCarModal =false;
      },
      cancelModCarModal(){
        this.showModCarModal =false;
      },
      handleSuccess(response, file, fileList){
        console.log(JSON.stringify(response));
        console.log(JSON.stringify(fileList));
        console.log(JSON.stringify(file));
      },
      changePage(num){
        console.log(num);
      },
      goBack () {
        this.$router.push({path: '/home'});
      },
      getList () {
        let $this = this;
        let params = {};
        $this.$emit('showLoading');
        api.fetchPost(api.path.in_theaters, params).then((data) => {
          //console.log(JSON.stringify(data));
          $this.$emit('hideLoading');
          data.subjects.forEach(function (e) {
            let item = {
              id: 0,
              title: '',
              rating: '',
            };
            item.id = e.id;
            item.title = e.title;
            item.rating = e.rating.average;
            $this.data1.push(item);
          });
        }).catch(err => {
          $this.$emit('hideLoading');
          this.$Message.error(err);
        })
      },
      del(){

      },
      goToDetail(params){
        this.$router.push({path: `/movie/detail/${params.row.id}`});
      }
    },
    beforeMount () {

    },
    mounted() {
      //this.getList();
    },
  };
</script>
